<!DOCTYPE html>
<html lang="en">
<!--[if lte IE 9]>
<script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script>
<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="/js/supplies/font/iconfont/iconfont.css">
    <link rel="stylesheet" href="/js/supplies/font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="/css/supplies/common.css">
    <link rel="stylesheet" href="/css/supplies/indexHome/indexHome.css">

    <style>
        /*vue 数据为渲染前隐藏*/
        [v-cloak] {
            display: none;
        }

        .table > thead > tr > th {

            border-bottom: 1px solid #F2F2F2 !important;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            vertical-align: middle;

        }

        .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > th {
            height: 60px;
        }

        .table > tbody > tr > td, .table > tfoot > tr > td, .table > thead > tr > td {
            height: 62px;
        }

        th, td {
            border-top: 0px !important;
            border-bottom: 1px solid #F2F2F2 !important;
        }

        .th-style {
            padding: 20px 0px !important;
        }

        .area-bg {
            width: calc(100% / 3 - 20px);
            text-align: center;
            background-color: #FFECE0;
            margin-right: 20px;
            margin-bottom: 20px;
            color: #666;
            float: left;
            z-index: 10;
            padding: 10px;

        }

        .modal-select {
            max-height: 420px;
            overflow: auto;
        }

        .text-l {
            text-align: left;
        }

        .text-c {
            text-align: center;
        }

        .b:hover {
            color: #fff;
        }

    </style>
</head>
<body>

<div id="homeVue" class="index_frame_box" v-cloak>

    <!--配送区域-->
    <div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h2 class="modal-title font_size_14">
                        已选择的配送区域 <br>Selected distribution area
                    </h2>
                </div>
                <div class="modal-body">
                    <div class="modal-select">
                            <div v-for="(v,index) in address.area" v-if="address.area">

                                <div class="area-bg">
                                    <div class="area-text">
                                        <span>{{v}} </span>
                                    </div>

                                </div>
                            </div>

                        <div v-if="!address.area">
                            暂无配送区域，请先选择!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="shop_container">
        <div class="shop_img">
            <img :src="url+supplier.image" alt=""
                 onerror="src='/image/supplies/logo.png'">
        </div>

        <div class="shop_name">
            <div class="shop_name_title">
                <span class="font_size_16">{{supplier.name}}<br></span>
                <span class="font_size_14 bg-color-en">   {{supplier.name_english}}</span>
            </div>
            <div class="shop_score ">
                <div class="score_title">
                    <div class="title_zh" class="font_size_14">评分<span class="bg-color-en" style="margin-left:5px">(score)</span>
                    </div>
                    <!--<div class="title_zh">{{supplier.star}}</div>-->
                    <!--<div class="title_en">score</div>-->
                </div>
                <div class="score_show" v-html="score()">
                    <!--                    <div class="score_fill_img"></div>
                                        <div class="score_fill_img"></div>
                                        <div class="score_fill_img"></div>
                                        <div class="score_fill_img"></div>
                                        <div class="score_img"></div>-->
                </div>
            </div>
        </div>
        <div class="clear-float"></div>
    </div>
    <div class="content">
        <div class="content-body">
            <div class="shop_info_box">
                <div class="modal_header form-inline">
                    <div class="modal_title form-group font_size_14">
                        店铺基本信息 <br>
                        <span class="bg-color-en">store's basic information</span>
                    </div>
                    <div class="my_btn form-group font_size_14" id="basic" onclick="btnClickBasic();">
                        编辑 <img style="width: 10px;height: 20px;margin-left: 5px"
                                src="/image/supplies/icon/left_index.png"></div>
                </div>
                <div class="modal_content form-inline ">
                    <div class="modal_content_s">
                        <div class="modal_content_s_r">
                            <div class="info_box form-group">
                                <div style="float: left;"><img src="/image/supplies/icon/phone-m.png"></div>
                                <div class="info_text"><span class="font_size_14">{{supplier.tel}}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal_content_s">
                        <div class="modal_content_s_r">
                            <div class="info_box form-group">
                                <div style="float: left;"><img src="/image/supplies/icon/address.png"></div>
                                <div class="info_text">
                                    <span class="font_size_14" v-html="supplier.address"></span><br>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal_content_s">
                        <div class="info_box form-group font_size_14">
                            <div style="float: left;"><img src="/image/supplies/icon/range.png"></div>
                            <div class="info_text" v-if="supplier.business" v-html="getBusiness(supplier.business_name)">

                            </div>
                            <div class="info_text" v-else>
                                <span >暂未选择主营项目</span><br>
                                <span class=" color-6">not distributing to the main category</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div style="clear: both"></div>
            </div>


            <div class="shop_shipping_box">
                <div class="modal_header form-inline">
                    <div class="modal_title form-group">
                        <span class="font_size_14">配送日程 <br> <span
                                class="bg-color-en">delivery schedule</span></span>

                    </div>
                    <div class="my_btn form-group font_size_14" id="area" onclick="btnClickArea();">
                        编辑 <img style="width: 10px;height: 20px;margin-left: 5px" src="/image/supplies/icon/left.png">
                    </div>
                </div>

                <div id="weekArea" class="box-bg"
                     style="margin-top: 20px;margin-bottom: 137px;padding: 0px 20px 0px 20px;display: none">
                    <table class="table">
                        <tbody style="display: table;width: 100%">
                        <tr>
                            <th class="th-style text-c color-6" style="width: 15%;">星期</th>
                            <th class="th-style text-c color-6" style="width: 15%;">日历</th>
                            <th class="th-style text-c color-6" style="width: 70%;">配送区域</th>
                        </tr>
                        <tr class="font_size_16" v-for="(vo,index) in weekArea">
                            <td>{{vo.week}}</td>
                            <td> {{vo.week_day}}</td>
                            <td class="font_size_14 text-l">
                                <div v-if="null == vo.areaInfo " style="float: left; margin: 3px 0">暂无配送区域<br> <span
                                        class="font_size_14 color-6">not distributing to this area at present</span></div>
                                <div v-if="null != vo.areaInfo " class="areaInfo">{{vo.areaInfo}}</div>
                                <div class="btn-2 " data-toggle="modal" data-target="#addressModal" style="float: right"
                                     @click="editArea(index)">查看(view)
                                </div>

                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="monthArea" class="box-bg"
                     style="margin-top: 20px;margin-bottom: 137px;padding: 0px 20px 0px 20px;display: none">
                    <table class="table">
                        <tbody style="display: table;width: 100%">
                        <tr>
                            <th class="th-style text-c color-6" style="width: 20%;">日期</th>
                            <th class="th-style text-c color-6" style="width: 80%;">配送区域</th>
                        </tr>
                        <tr class="font_size_16" v-for="(vo,index) in monthArea">
                            <td>{{vo.month_day}}</td>
                            <td class="font_size_14 text-l">
                                <div v-if="null == vo.areaInfo " style="float: left;margin: 3px 0">暂无配送区域<br> <span
                                        class="font_size_14 color-6">not distributing to this area at present</span></div>
                                <div v-if="null != vo.areaInfo " class="areaInfo">{{vo.areaInfo}}</div>
                                <div class="btn-2 " data-toggle="modal" data-target="#addressModal" style="float: right"
                                     @click="editArea(index)">查看(view)
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script rel="script" src="/js/supplies/jquery.min.js"></script>
<script rel="script" src="/js/supplies/bootstrap.min.js"></script>
<script rel="script" src="/js/supplies/vue.min.js"></script>
<script rel="script" src="/js/supplies/common.js"></script>
<script rel="script" src="/js/vue-resource.js"></script>
<script rel="script" src="/js/supplies/layer/layer.js"></script>
<script rel="script" src="/js/supplies/indexHome/indexHome.js"></script>
<script>

    var vm = new Vue({
        el: "#homeVue",
        data: {
            weekArea: [],//这是配送区域显示数据，需初始化时组装
            monthArea: [],//这是配送区域显示数据，需初始化时组装
            supplier_id:{$id} ,
            supplier: {
                name: "",
                name_english: "",
                star: "",
                tel: "",
                address: "",
                address_english: "",
                business: "",
                business_english: ""
            },
            send_day: [],
            send_time_type: '',
            send_time: [],
            address: [],
            day: 0,
            url:oss_url
        },
        methods: {
            req: function () {
                var dataPost = {
                    supplier_id: this.supplier_id
                };
                this.$http.post('/supplies/Indexhome/supplierInfo', dataPost, {
                    emulateJSON: true
                }).then(function (res) {
                    if (res.data.status == 200) {
                        this.supplier = res.data.supplier;
                        this.send_day = res.data.send_day;
                    } else {
                        layer.msg(res.data.msg,{
                            skin:'winning-class',//自定义样式winning-class
                            time:3000
                        });
                    }
                }, function (res) {

                });
                this.scheduleInit();
            },
            getBusiness:function (value) {
                //console.log(value);
                    var html1 = '';
                    var html2 = '';
                    var va = value.split(",");
                    for(var i = 0 ; i<va.length ;i++){
                        var data = va[i].split("/");
                        html1 +=  data[0] + " ," ;
                        html2 +=  data[1] + " ," ;
                    }
                    html1  = '<span > '+html1.substr(0,html1.length-1)+'</span> <br>' ;
                    html2 = '<span class="color-6"> '+html2.substr(0,html2.length-1)+'</span>' ;
                    return html1 + html2 ;
            }
            ,
            score: function () {
                var stars;
                stars = Math.round(this.supplier.star * Math.pow(10, 0)) / Math.pow(10, 0);
                var html = star(stars);
                return html;
            },
            editArea: function (i) {
                vm.day = i;
                vm.address = [];

                if(vm.send_time[i+1] != null){
                    vm.address = vm.send_time[i+1];
                }


            },

            setSendTime: function () {
                if ('2' == vm.send_time_type) {
                    var count = getCurrentMouthDays(); //获取本月天数
                    for (var i = 1; i <= count; i++) {
                        var obj = {
                            month_day: 10 > i ? '0' + i : i,
                            areaInfo: null == vm.send_time[i] ? null : vm.send_time[i].area.toString()
                        };
                        vm.monthArea.push(obj);
                    }
                    $("#weekArea").css("display", "none");
                    $("#monthArea").css("display", "block");

                } else {
                    var weekDays = getCurrentWeekDays();  //获取本月天数
                    var week = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
                    for (var i = 0; i < 7; i++) {
                        var obj = {
                            week: week[i],
                            week_day: 10 > weekDays[i] ? '0' + weekDays[i] : weekDays[i],
                            areaInfo: null == vm.send_time[i + 1] ? null : vm.send_time[i + 1].area.toString()
                        };
                        vm.weekArea.push(obj);
                    }
                    $("#weekArea").css("display", "block");
                    $("#monthArea").css("display", "none");
                }

            },
            scheduleInit: function () {
                $.ajax({
                    url: '/supplies/Indexhome/getSendTimeBySupplierId',
                    type: 'post',
                    data: {
                        supplier_id: this.supplier_id
                    },
                    success: function (ret) {
                        if (200 == ret.status) {
                            vm.send_time = ret.data.send_time;
                            vm.send_time_type = ret.data.send_time_type;
                            //设置配送时间
                            vm.setSendTime();
                        }
                    }
                });
            }
        },
        created: function () {

            this.req();
        }
    });


</script>
</body>
</html>